<template>
    <div>
        <div @mouseleave="joinVisible = false">
            <transition name="joinAnimation" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutUp">
                <el-form v-if="joinVisible" ref="joinButtonForm" class="joinPannel" :rules="rules" :model="joinForm">
                    <el-form-item prop="name">
                        <el-input v-model="joinForm.name" placeholder="输入您的昵称" si ze="medium" style="width:255px" />
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="joinForm.phone" placeholder="输入您的联系手机" size="medium" style="width:255px" />
                    </el-form-item>
                    <el-form-item prop="msg_code">
                        <el-input v-model="joinForm.msg_code" style="width:135px" placeholder="请输入验证码" />
                        <el-button style="width:110px;height:40px;margin-left:10px" :disabled="sendButton" @click="sendMsg">{{ buttonText }}</el-button>
                    </el-form-item>
                    <p style="font-size:12px;color:rgb(140,140,140);margin-bottom:13px">填写信息，我们会尽快与您联系</p>
                    <el-button size="mini" type="primary" round @click="join">我要加入</el-button>
                </el-form>
            </transition>
        </div>

        <div @mouseleave="QRVisible = false">
            <transition name="QRAnimation" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutUp">
                <div v-if="QRVisible" class="QR-box">
                    <transition name="QRiconAnimation" enter-active-class="animated bounceIn" mode="out-in">
                        <img v-if="isWeibo" key="icon1" src="../assets/qr1.png" style="width:160px;height:160px">
                        <img v-else key="icon2" src="../assets/qr2.png" style="width:160px;height:160px">
                    </transition>
                    <div class="QR-icon-box">
                        <img src="../assets/weibo-icon.png" style="width:40px;height:40px;margin-right:40px;cursor: pointer;" @mouseover="isWeibo = true">
                        <img src="../assets/weixin-icon.png" style="width:40px;height:40px;cursor: pointer;" @mouseover="isWeibo = false">
                    </div>
                </div>
            </transition>
        </div>

        <div class="cancel-area" @mouseover="QRVisible = false;joinVisible = false" />
        <div class="button-pannel">
            <div class="button-item">
                <i class="el-icon-top" @click="getTop" />
                <span>回到顶部</span>
            </div>
            <div class="divider" />
            <div class="button-item">
                <i class="iconfont icon-QRcode" @mouseover="QRVisible = true;joinVisible = false" @click="QRVisible = false" />
                <span>扫码关注</span>
            </div>
            <div class="divider" />
            <div slot="reference" class="button-item" @mouseover="joinVisible = true;QRVisible = false" @click="joinVisible = false">
                <i class="iconfont icon-Customermanagement-fill" />
                <span>加入我们</span>
            </div>
            <div class="divider" />
            <div id="server" class="button-item" @click="callServer">
                <i class="iconfont icon-phone" />
                <span>在线咨询</span>
            </div>
        </div>
    </div>
</template>

<script>
// import {
//     joinUs,
//     getCaptcha
// } from '../js/api'
export default {
    name: 'ContactButton',
    // props: {
    //     bottom: {
    //         type: String,
    //         default: '-100%'
    //     },
    //     position: {
    //         type: String,
    //         default: 'absolute'
    //     },
    //     dashboard: {
    //         type: null,
    //         default: false
    //     }
    // },
    // data() {
    //     var checkPhone = (rule, value, callback) => {
    //         if (!value) {
    //             return callback(new Error('手机号不能为空'))
    //         } else {
    //             const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
    //             if (reg.test(value)) {
    //                 callback()
    //             } else {
    //                 return callback(new Error('请输入正确的手机号'))
    //             }
    //         }
    //     }
    //     return {
    //         QRVisible: false,
    //         joinVisible: false,
    //         isWeibo: true,
    //         joinForm: {
    //             name: '',
    //             phone: '',
    //             msg_code: ''
    //         },
    //         rules: {
    //             name: [{
    //                 required: true, message: '请输入昵称', trigger: 'blur'
    //             }],
    //             phone: [{
    //                 validator: checkPhone, trigger: 'blur'
    //             }],
    //             msg_code: [{
    //                 required: true, message: '请输入验证码', trigger: 'blur'
    //             }]
    //         },
    //         buttonText: '发送验证码',
    //         sendButton: false,
    //         timeNumber: 60
    //     }
    // },
    // mounted() {
    //     if (this.dashboard) {
    //         const that = this
    //         setTimeout(function () { that.joinVisible = true }, 14000)
    //     }
    // },
    // methods: {
    //     getTop() {
    //         window.scrollTo({
    //             left: 0,
    //             top: 0,
    //             behavior: 'smooth'
    //         })
    //     },
    //     sendMsg() {
    //         this.$refs['joinButtonForm'].validateField('phone', (errMsg) => {
    //             if (errMsg) {
    //                 this.$message({
    //                     message: '请正确填写手机号',
    //                     type: 'error'
    //                 })
    //             } else {
    //                 this.sendButton = true
    //                 this.buttonText = `发送验证码(60)`
    //                 getCaptcha({ phone: this.joinForm.phone }).then(res => {
    //                     if (res.code === 200) {
    //                         this.$message({
    //                             message: res.msg,
    //                             type: 'success'
    //                         })
    //                     } else {
    //                         this.$message({
    //                             message: res.msg,
    //                             type: 'error'
    //                         })
    //                     }
    //                 })
    //                 this.timeSeter()
    //             }
    //         })
    //     },
    //     timeSeter() {
    //         const that = this
    //         setTimeout(function () {
    //             if (that.timeNumber === 1) {
    //                 that.sendButton = false
    //                 that.buttonText = `发送验证码`
    //                 that.timeNumber = 60
    //                 return
    //             }
    //             that.timeNumber -= 1
    //             that.buttonText = `发送验证码(${that.timeNumber})`
    //             that.timeSeter()
    //         }, 1000)
    //     },
    //     join() {
    //         this.$refs['joinButtonForm'].validate((valid) => {
    //             if (valid) {
    //                 if (localStorage.getItem('tag_id')) {
    //                     this.joinForm.tag_id = localStorage.getItem('tag_id')
    //                 }
    //                 joinUs(this.joinForm).then(res => {
    //                     if (res.status === 200) {
    //                         this.$message({
    //                             message: res.data.message,
    //                             type: 'success'
    //                         })
    //                         this.joinForm = { name: '', phone: '', msg_code: '' }
    //                     } else {
    //                         this.$message({
    //                             message: res.data.message || '留言失败，请重试',
    //                             type: 'error'
    //                         })
    //                     }
    //                 })
    //             } else {
    //                 this.$message({
    //                     message: '请填写正确数据',
    //                     type: 'error'
    //                 })
    //             }
    //         })
    //     },
    //     callServer() {
    //         window.open(window.ysfURL, '在线咨询', 'width=594,height=631,location=no,left=500,top=200')
    //     }
    // }
}

</script>
<style scoped>
/* @import url(//at.alicdn.com/t/font_1372712_n57lh8xy8qq.css); */

.QR-box {
    width: 250px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 11%;
    bottom: 11%;
    z-index: 500;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
}
.joinPannel {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 260px;
    bottom: 11%;
    right: 11%;
    z-index: 500;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
}
.divider {
    width: 60px;
    margin: 10px 10px 0 10px;
    height: 1px;
    background-color: #d0dae8;
}
.button-pannel {
    border-radius: 16px;
    padding: 10px 0 10px 0;
    margin: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 10%;
    right: 5%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 3;
}
.cancel-area {
    position: fixed;
    bottom: 10%;
    width: 8%;
    height: 300px;
    z-index: 2;
    right: 0;
}
.button-item {
    font-size: 12px;
    height: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(150, 150, 150);
    cursor: pointer;
}
.button-item:hover {
    color: #295696;
}
.button-pannel i {
    font-size: 24px;
    color: inherit;
    padding: 10px;
}
</style>
